원티드 프리온보딩 8월 챌린지 [2-1] 일지

2022년 08월17일

3번쨰 강의 일지입니다. 한번에 3개의 일지를 작성하다보니

두서가 없거나 기억이 않나는 부분이 많습니다. 😥

1. Redux

리덕스는 Flux 패턴 기반의 구현체입니다.

리덕스는 단방향으로 데이터 이동이 일어납니다.

(View → Action + Dispatcher → Middleware → Reducer → Store) → View

그중에서 Reducer가 순수함수라는 말이 나왔습니다.

순수함수는 동일한 인자가 들어오면 항상 같은 값을 리턴하는 함수입니다.

외부요인을 side-effect라고하는데 외부요인에 의해서 값이 변하면 순수

함수가 아닌거죠 (useEffect는 side-effect에서 따 왔다고 합니다.)

리덕스는 View 에서 유저가 일으키는 행동을 할때 Action이 생성되고

Action은 Dispatcher를 만나 Reducer로 전달되어 Store가 변경됩니다.

Redux는 다음 세 가지 설계 철학을 가집니다.

  • 진실은 하나의 소스로부터 (Single source of truth)

  • 상태는 읽기 전용이다 (State is read-only)

  • 변화는 순수 함수로 작성되어야 한다

2. React Query

서버에서 가져온 데이터일 경우 문제가 생긴다고 합니다.

redux의 진실은 하나의 소스로부터 라는 부분이 문제인 거죠

그 이유는 redux store에 정보를 넣게 되는데 store에 저장되는이상

원본이아닌 복사본이기 때문에 최신 데이터라고 보기 어렵기 때문이죠

그렇지만 최신 데이터 여부를 아는 개념은 캐시(Cache)가 있습니다.

캐시(Cache)를 손쉽게 설정할수 있는 api가 React Query인거죠!

React Query를 공부하던중에 사이트가 tanstack로 바뀌어서 많은

당황을 했습니다. (tanstack가 오피셜 사이트가 아닌줄...)

현재 todo앱은 npm i react-query를 사용했지만

후에 react-query를 사용하게 된다면 @tanstack/react-query 적용할겁니다.

우아한 테크 세미나에서도 들은 내용이지만 react-query는 새로운 마법같은

것이 아닌 기존의 contextApi를 사용해서 만들어진 과학입니다. (마법x)

3. 2차 리팩토링

2차 리팩토링 진행 당시에 제 레포가 2번이나 등장을 했습니다. 🚀

첫번쨰 등장은 제 깃허드 리드미에 tree를 보시고 before->after가

바디프로필 같다고 하셨습니다. (그만큼 많은 변화가..)

두번쨰 등장 했을때 제 api호출 코드를 보시고 많은 피드백을 주셨습니다.

그때 저한테 많은 질문을 주셨는데 제 대답이 많이 느려서 죄송했습니다.

당시에 하신 말씀을 이해하는데 시간이 들어서 대답이 느려졌습니다. ㅠㅠ

그 밖에도 폴더구조와 ui/ux에 대한 구현을 말씀해 주셨는데

저는 error를 모드 alert로 처리하고 있었기 때문에

위같은 alert를 계속 표시할경우 사용자가 '아 짜증나 그냥 안해!'

라는 경우가 발생할수가 있기 때문에 alert를 지양해야 된다고 합니다.

alert 대신 사용 ex)

그리고 버튼은 성질이 3가지 있습니다.

  • 파괴적 버튼

    • 회원 탈퇴, 목록 삭제, 주문 취소 등 되돌리기 어렵거나 불가능한 경우에 파괴적 버튼을 사용하는 것이 좋음

    • 일반적으로 Dialog를 출력하고, 빨간색 레이블처럼 해당 동작의 중요도를 선명하게 알려줄 수 있는 색상의 버튼을 배치

  • 방어적 버튼

    • 게시물 작성 등 최종적인 동작을 결정하는 버튼은 화면 우측 상단과 같이 일반적으로 브라우징을 할 때 사용자가 클릭하지 않아 실수로라도 누르기 힘든 위치에 둔다

  • onbeforeunload

    • 입력이 많은 form 등이 들어 있는 페이지에서 사용자가 입력 중일 때 실수로 뒤로 가기 동작을 할 경우 “정말로 페이지를 이동하시겠습니까?” 경고 창을 띄워주는 것이 좋다

4. 과제

  • 과제 1) README 작성 및 코드 정리

    리드미를 더 프로답게 작성하는 것이 첫번째 과제 입니다.

  • 과제 2) ‘개발자로서의 나’ 특징 정의해보기

    제일 어려운 과제인것 같습니다.

    왜 개발자하고 싶은지 어떠한 단점/장점이 있는지를 고민하고

    이력서 , github, 기술 블로그 , 과제, README , 인성 면접

    이 잘 준비되어있는지 체크하는 과제입니다.

5. 소감

정말 막바지를 달려가고 있다는 느낌이 듭니다.

저는 이 코스를 끝나고 프리온보딩 프론트엔드 코스를 추가로

들을 예정입니다. (떨어져서 못 들을수도 있습니다..)

현재 재가 작성한 코드를 더 업그레이드하고 리드미를 작성하고

여러 철학적인 개발 질문들을 생각하고 어려운 과제이지만

끝 마치고나서 더 업그레이드가 되겠죠? ㅎㅎ

top버튼